<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-75%">
        <!--    回显-->
        <Descriptions class="m-b-50px" :schema="detailSchema" :data="descriptionsRow" />
        <!--    支付 title-->
        <!-- <div class="my-20px">
          <span class="font-weight-bold">{{ t('wholesalOrder.paymentInformation') }}</span>
        </div> -->
        <!-- 支付信息列表 -->
        <!-- <el-table
          :data="tablePaymentList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.paymentType')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(paymentMethodList, row.payment_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.receivingAccountNumber')"
            prop="pay_account"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.transactionTicketNumber')"
            prop="voucher_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.proofOfTransfer')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.transfer_voucher_url"
                style="width: 100px; height: 100px"
                :src="row.transfer_voucher_url"
                :preview-teleported="true"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[row.transfer_voucher_url]"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.paymentTrackingCode')"
            prop="pay_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentCurrency')"
            prop="pay_currency"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentLinks')"
            prop="payment_url"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentTime')"
            prop="pay_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBePaid')"
            prop="pay_amount"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentStatus')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(paymentStatusList, row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.notes')"
            prop="notes"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.reviewers')"
            prop="reviewer"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(operatorList, row.reviewer) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.reviewTime')"
            prop="reviewer_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
        </el-table> -->
        <!--    商品 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('wholesalOrder.shop') }}</span>
        </div>
        <!-- 商品列表 -->
        <el-table
          :data="tableShopList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.warehouse')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseList, row.wid) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.code')"
            prop="product_code"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.name')"
            prop="product_name"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.brand')"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(brandList, row.brand) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.type')"
            min-width="80"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseTypeList, row.is_futures) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.arrivalDate')"
            prop="arrival_date"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.realArrivalDate')"
            prop="real_arrival_date"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.price')"
            prop="original_price"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theActualPricePaid')"
            prop="actual_selling_price"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.quantityPurchased')"
            prop="pay_quantity"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.pendingQuantity')"
            prop="quantity_to_be_shipped"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.computingPower')"
            prop="hashrate"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.warranty')"
            prop="expiration_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="{ row }">
              <el-button
                v-if="row.is_futures !== 0 && row.pay_quantity > 0"
                type="primary"
                @click="handleInventoryTypeConversion(row)"
                size="small"
              >
                {{ t('order.inventoryTypeConversion') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    发货订单 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('wholesalOrder.fulfillTheOrder') }}</span>
        </div>
        <!-- 发货订单列表 -->
        <el-table
          :data="tableOrderList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.orderNo')"
            prop="order_no"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.username')"
            prop="user_name"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.deliveryAddress')"
            prop="shipping_address"
            min-width="350"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.receiptMethod')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(deliveryMethodList, row.delivery_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.logisticsCosts')"
            prop="logistics_fee"
            min-width="200"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <!--      时间线-->
      <TimeLine class="w-25%" :data="timeLineList" />
      <!--      库存类型转换弹框-->
      <InventoryTypeConversion ref="DialogInventoryTypeConversionRef" @refresh="getDetail" />
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import TimeLine from './components/TimeLine/index.vue'
import InventoryTypeConversion from './components/DialogInventoryTypeConversion/index.vue'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getEnumApi, getInventoryEnumApi } from '@/api/wholesalOrder'
import { useEnumeratePicker } from '@/utils'
import { getPayEnumApi } from '@/api/order/pay'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const DialogInventoryTypeConversionRef = ref<InstanceType<typeof InventoryTypeConversion>>()

const tableLoading = ref<boolean>(false)

const tablePaymentList = ref<any[]>([])
const tableShopList = ref<any[]>([])
const tableOrderList = ref<any[]>([])

const timeLineList = ref<any[]>([])

const brandList = ref<Array<Record<string, any>>>([])
const payStatusList = ref<Array<Record<string, any>>>([])
const paymentStatusList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([])
const deliveryMethodList = ref<Array<Record<string, any>>>([])
const paymentMethodList = ref<Array<Record<string, any>>>([])
const warehouseList = ref<Array<Record<string, any>>>([])
const warehouseTypeList = ref<Array<Record<string, any>>>([])
const operatorList = ref<Array<Record<string, any>>>([])

const descriptionsRow = ref<Record<string, any>>({})
const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'user_email',
    label: t('wholesalOrder.wholesal')
  },
  {
    field: 'order_no',
    label: t('wholesalOrder.orderNo')
  },
  {
    field: 'total_amount',
    label: t('wholesalOrder.theTotalAmountOfTheOrder')
  },
  {
    field: 'status',
    label: t('wholesalOrder.status'),
    slots: {
      default: (data: Record<string, any>) => {
        const statusMap = {
          10: '#FFA500', // 黄色 - 待处理
          20: '#FFD700', // 黄色
          21: '#32CD32', // 绿色
          30: '#1E90FF', // 蓝色
          40: '#9370DB', // 紫色
          50: '#20B2AA', // 青色
          70: '#c8c9cc', // 红色 - 已取消
          100: '#67c23a' // 绿色 - 已完成
        }
        const color = statusMap[data.status] || 'var(--el-color-warning)'
        return (
          <span
            style={`color: ${color}; background-color: var(--el-color-info-light-9); font-weight: 600; font-size: 12px; padding: 5px 15px; border-radius: 4px`}
          >
            {useEnumeratePicker(statusList.value, data.status)}
          </span>
        )
      }
    }
  },
  {
    field: 'pay_amount',
    label: t('wholesalOrder.theAmountToBePaid')
  },
  {
    field: 'pay_status',
    label: t('wholesalOrder.pay_status'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(payStatusList.value, data.pay_status)}</span>
      }
    }
  }
])

//打开库存类型转换弹框
const handleInventoryTypeConversion = (row: Record<string, any>) => {
  let path = `/order/wholesal-order-management/shopInventoryTypeConversion`
  let params = {} as any
  params.order_item_id = row?.id
  params.order_id = query.id
  push({ path: path, query: params })
  // nextTick(() => {
  //   DialogInventoryTypeConversionRef.value!.dialogVisible = true
  //   DialogInventoryTypeConversionRef.value?.getBackShow(JSON.parse(JSON.stringify(row)))
  // })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  statusList.value = resp.data.status
  payStatusList.value = resp.data.pay_status
  deliveryMethodList.value = resp.data.delivery_method
  paymentMethodList.value = resp.data.pay_method
  const brandResp = await getInventoryEnumApi({ field: 'all' })
  brandList.value = brandResp.data.brand
  warehouseList.value = brandResp.data.wid
  warehouseTypeList.value = brandResp.data.is_futures
  const orderResp = await getPayEnumApi({ field: 'all' })
  paymentStatusList.value = orderResp.data.pay_status
  const operatorResp = await getEnumApi({ field: 'operator' })
  operatorList.value = operatorResp.data.operator
}

const getDetail = async () => {
  const resp = await getDetailApi(query.id as string)
  descriptionsRow.value = resp.data
  tablePaymentList.value = resp.data.payment_list
  tableShopList.value = resp.data.products_list
  tableOrderList.value = resp.data.order_list
  timeLineList.value = resp.data.logger
}

onMounted(() => {
  getDropDownBoxInfo()
  getDetail()
})
</script>
<style lang="less" scoped></style>
